<template>
	<div>
		<!--基本信息-->
		 <el-drawer :modal="false" style="position:absolute; background-color: #2a2a2a; color: #aaaaaa;" size="280"  :show-close="true" v-model="baseicVisible" :modal-append-to-body="false" >
		     <template #header="{ close, titleId, titleClass }">
		          <h4 :id="titleId" :class="titleClass">作品信息</h4>
		     </template>
			 
			 <div>
				 <div class="title">作品标题</div>
				 <div>
					 <el-input type="textarea" dark :rows="3" style="background: #2a2a2a!important;" v-model="panoData.title"></el-input>
				 </div>
				 <div class="title">作品简介</div>
				 <div>
				 	 <el-input type="textarea" :rows="3" style="background: #2a2a2a!important;" v-model="panoData.intro"></el-input>
				 </div>
			 </div>
			 <template #footer>
			       <div>
			         <el-button type="primary" @click="baseicVisible=false" style="width: 100%;">完成修改</el-button>
			       </div>
			     </template>
		  </el-drawer>
		
		<el-collapse >
			<el-collapse-item title="基本信息" name="basic">
				<template #title>
					<div>
						基本信息
					</div>
				</template>
				<div>
					<div style="padding: 8px; margin-right:10px;background-color: #3b3b3b; border-radius: 5px; margin-bottom: 10px; display: flex;cursor: pointer;" >
						<div style="flex: 1; "  @click="handleEditInfo">作品信息</div>
						<div><el-icon :size="14"><ArrowRight /></el-icon></div>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
		
		
		
	</div>
</template>

<script>
	export default {
		props: ["panoData"],
		data(){
			return{
				 baseicVisible:false
			}
		},
		methods:{
			handleEditInfo(){
				this.baseicVisible=true;
				console.log("show");
			}
		},
		watch: {
			panoData: function(val) {
				console.log(val);
			},
			
		}
	}
</script>

<style scoped>
	 

	   
</style>